<template>
  <div class="module-page">
    <div class="module-page-title">选择一个你要展示的模块</div>
    <a-tabs v-model:activeKey="activeType" @change="tabChange">
      <a-tab-pane v-for="item in moduleList" :key="item.type" :tab="item.name">
        <div class="content-box">
          <template v-if="item.type === 'chart'">
            <div v-for="item in item.children" :key="item.groupName">
              <div class="group-title">{{ item.groupName }}</div>
              <a-row :gutter="20">
                <a-col :span="6" v-for="item in item.children" :key="item.type">
                  <router-link :to="'/make?type=' + item.type">
                    <div class="show-item">
                      <div class="image">
                        <img v-if="item.image" :src="item.image" />
                        <template v-else> 暂无缩略图 </template>
                      </div>
                      <div class="hd-title">{{ item.name }}</div>
                    </div>
                  </router-link>
                </a-col>
              </a-row>
            </div>
          </template>

          <a-row :gutter="20" v-else>
            <a-col :span="6" v-for="item in item.children" :key="item.type">
              <router-link :to="'/make?type=' + item.type">
                <div class="show-item">
                  <div class="image">
                    <img v-if="item.image" :src="item.image" />
                    <template v-else> 暂无缩略图 </template>
                  </div>
                  <div class="hd-title">{{ item.name }}</div>
                </div>
              </router-link>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>
      <template #tabBarExtraContent>
        <router-link class="primary-color" to="/user?type=module">我的图表</router-link>
      </template>
    </a-tabs>
  </div>
</template>
<script>
  import { moduleList, groupType, showType } from '../../constants/showType';

  export default {
    setup() {},
    data() {
      return {
        activeType: 'chart',
        moduleList: moduleList(),
        list: [],
      };
    },
    created() {
      let query = this.$route.query;
      if (query.type) {
        this.activeType = query.type;
      }
    },
    methods: {
      tabChange(v) {
        this.$router.replace({ query: { type: v } });
      },
    },
  };
</script>
<style lang="scss">
  .module-page {
    padding: 0 20px;
    .module-page-title {
      font-size: 24px;
      padding: 40px 0px 30px 0px;
      color: #666;
    }
    .tabs {
      overflow: hidden;
      border-bottom: solid #ddd 1px;
      .tabs-item {
        float: left;
        padding: 12px 16px;
        font-size: 16px;
        cursor: pointer;
        margin-right: 20px;
        &.act {
          color: #688ff4;
          border-bottom: solid 2px #688ff4;
        }
      }
    }
    .content-box {
      padding-top: 10px;
      .group-title {
        font-size: 13px;
        padding-bottom: 10px;
        color: #666;
        font-weight: 500;
      }
      .show-item {
        margin-bottom: 20px;
        cursor: pointer;
        background: #fff;
        border-radius: 4px;
        &:hover {
          box-shadow: 0 2px 10px #ddd;
        }
        .image {
          height: 200px;
          line-height: 200px;
          text-align: center;
          color: $text-color-secondary;
          img {
            max-width: 100%;
            max-height: 100%;
          }
        }
        .hd-title {
          font-size: 13px;
          padding: 10px;
          font-weight: 600;
        }
      }
    }
  }
</style>
